<template>
  <div class="ad-form">
    <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form">
      <div class="ad-block">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="区划代码：" prop="code">
              <el-input :disabled="$attrs.mode == 'edit'" v-model="form.code"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="form.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属城市：" prop="cityName">
              <ad-select  v-model="form.cityCode" :options="cityData"
                          :config="{optionKey: 'name', optionValue: 'code'}"
                          @select="city => form.cityName = city.name"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div class="op">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="cancel" plain>取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import AdSelect from '@/components/AdSelect'
import adForm from '@/mixins/adForm'
import { get, add, edit } from '@/api/region/area'
import { get as getCityData } from '@/api/region/cityData'

class Form {
  code = ''
  name = ''
  cityCode = ''
  cityName = ''
}

export default {
  components: { AdSelect },
  mixins: [adForm({get, add, edit})],
  data() {
    return {
      cityData: [],
      form: new Form()
    }
  },
  methods: {
    afterOpen() {
      this.form.cityCode = this.$attrs.selectedCity.code
      this.form.cityName = this.$attrs.selectedCity.name
      getCityData(this.$attrs.selectedCity.provinceCode).then(res => {
        this.cityData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>